<template>
    <view class="confirm-order">


        <view class="cen-box">
        <!-- 服务保障横幅 -->
        <view class="service-guarantees">
            <view class="guarantee-item" v-for="(item, key) in selectedSpec.serviceDetail.service_features" :key="key">
                <span class="iconfont" :class="tagList[item]"></span>
                <text>{{ item }}</text>
            </view>
        </view>

        <!-- 服务项目卡片 -->
        <view class="service-card">
            <view class="service-card-box">
                <view class="service-image">
                    <u-image :src="(selectedSpec && selectedSpec.serviceDetail && selectedSpec.serviceDetail.image)" mode="aspectFill" width="160rpx" height="160rpx" radius="12rpx"></u-image>
                </view>
                <view class="service-info">
                    <view class="service-title">{{ (selectedSpec && selectedSpec.serviceDetail && selectedSpec.serviceDetail.name) }}</view>
                    <view class="service-spec">规格: {{ (selectedSpec && selectedSpec.name)}}</view>
                    <view class="service-price-box">
                        <view class="service-price">
                            <text class="service-price-txt" v-if="!is_bidding">¥</text>
                            <text class="service-price-num" v-if="!is_bidding">{{ (selectedSpec && selectedSpec.price) }}</text>
                            <text class="service-price-txt" v-if="!is_bidding">/{{ (selectedSpec && selectedSpec.unit) }}</text>
                        </view>
                        <view class="quantity-selector">
                            <view class="quantity-btn" @click="decreaseQuantity">-</view>
                            <view class="quantity-input">{{ selectedSpec ? selectedSpec.quantity : quantity }}</view>
                            <view class="quantity-btn" @click="increaseQuantity">+</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>


        <!-- 价格明细 -->
        <view class="price-card">
            <view class="price-item" @click="openCouponPopup" v-if="!is_bidding">
                <text class="price-label">优惠券</text>
                <view class="price-value">
                    <text class="discount">{{ selectedCoupon ? `${selectedCoupon.type}-${selectedCoupon.amount}.00` : '请选择' }}</text>
                    <u-icon name="arrow-right" size="16" color="#333"></u-icon>
                </view>
            </view>
            <view class="price-item" v-if="!nowSelectedAsset && !is_bidding" @click="openVirtualAssetPopup">
                <text class="price-label">虚拟资产</text>
                <view class="price-value">
                    <text class="virtual-asset">{{ virtualAssetText }}</text>
                    <u-icon name="arrow-right" size="16" color="#333"></u-icon>
                </view>
            </view>
            <view class="price-item" v-if="nowSelectedAsset === 'points'">
                <view class="dk-con"  @click="openVirtualAssetPopup">
                    <view class="price-label">积分抵扣</view>
                    <view class="price-label-txt">共有{{ pointsValue }}积分，可打0折</view>
                </view>
                <view class="price-value">
                    <text class="virtual-asset">-{{ (usePoints ? pointsDiscountAmount : 0) }}</text>
                    <u-switch v-model="usePoints" @change="changePointsSwitch" size="15"></u-switch>
                </view>
            </view>
            <view class="price-item" v-if="nowSelectedAsset === 'warmCore'">
                <view class="dk-con"  @click="openVirtualAssetPopup">
                    <view class="price-label">暖芯值抵扣</view>
                    <view class="price-label-txt">共有{{ warmCoreValue }}暖芯值，可抵扣¥{{ warmCoreDiscount }}</view>
                </view>
                <view class="price-value">
                    <text class="virtual-asset">-{{ (useWarmCore ? warmCoreDiscount : 0) }}</text>
                    <u-switch v-model="useWarmCore" @change="changeWarmCoreSwitch" size="15"></u-switch>
                </view>
            </view>

            <view class="price-summary">
                <text class="total-count">共{{ selectedSpec ? selectedSpec.quantity : quantity }}件</text>
                <view class="subtotal">
                    <text class="subtotal-label">小计：</text>
                    <text class="subtotal-price">{{ subtotal }}</text>
                </view>
            </view>
        </view>
        </view>

        <!-- 底部提交按钮 -->
        <fixed-footer>
            <view class="submit-btn" @click="submitOrder">立即购买 {{ subtotal }}</view>
        </fixed-footer>

        <!-- 虚拟资产 -->
        <virtual-asset-popup 
            :show.sync="showVirtualAssetPopup"
            :assets="virtualAssets"
            :defaultSelected="selectedAsset || ''"
            @assetsReady="onAssetsReady"
            @confirm="onAssetConfirmed"
        />
        
        <!-- 支付弹窗 -->
        <order-pay-popup
            :show.sync="showPayPopup"
            :amount="Number(subtotal)"
            :balance="userBalance"
            @confirm="handlePayConfirm"
        />

        <shop-specifications 
            :show="showPackagePopup"
            :serviceDetail="selectedSpec.serviceDetail"
            :defaultSpecId="selectedSpec.id"
            :defaultQuantity="selectedSpec.quantity"
            @confirm="onConfirmSelection"
            @close="closePackagePopup"
        />

        <!-- 优惠券弹窗 -->
        <u-popup :show="showCouponPopup" mode="bottom" 
            @close="closeCouponPopup" 
            :closeable="true" 
            :safeAreaInsetBottom="true"
            round="15"
            height="70%">
            <view class="coupon-popup">
                
                <!-- 优惠券列表 -->
                <view class="coupon-list-container">
                    <CouponList
                        ref="coupon"
                        :couponList="couponList"
                        :type="['usable','available','canceluse']"
                        @claimCoupon="handleClaimCoupon"
                        @useCoupon="handleUseCoupon"
                        @cancelUseCoupon="handleCancelUseCoupon"
                    />
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import fixedFooter from '@/components/fixed-footer/index.vue'
import OrderPayPopup from '@/components/order/pay.vue'
import shopSpecifications from '@/components/shop-specifications/index.vue'
import CouponList from '@/components/coupon/index.vue' // 引入优惠券组件
import VirtualAssetPopup from '@/components/virtual-asset-popup/index.vue'
import { mapGetters, mapMutations } from 'vuex'
import { getHousekeepMenmberAssets, postHousekeepOrderCreate } from '@/api/index.js'
import addressVue from '@/components/address/index.vue'

export default {
    data() {
        return {
            is_bidding: false, //默认不是竞价
            blackUrl: '',
            salary:'',
            remarks: '',
            basePrice: 45,
            discount: 0,
            showVirtualAssetPopup: false,
            selectedAsset: null,
            pointsValue: 0,
            warmCoreValue: 0,
            warmCoreDiscount: 0,
            // 控制是否启用对应抵扣
            usePoints: true,
            useWarmCore: true,
            nowSelectedAsset:null,
            // 支付弹窗
            showPayPopup: false,
            userBalance: 0,
            selectedPackage: 1, // 默认选中第一个套餐
            showPackagePopup: false, // 控制套餐选择弹窗的显示
            quantity: 1, // 弹窗中选中的购买数量
            // 优惠券相关
            showCouponPopup: false,
            couponList: [
                {
                    id: 1,
                    amount: 20,
                    condition: 100,
                    type: '满减券',
                    restriction: '限家政服务类订单使用',
                    status: 'usable',
                    validUntil: '2025-12-31'
                },
                {
                    id: 2,
                    amount: 50,
                    condition: 200,
                    type: '满减券',
                    restriction: '限家政服务类订单使用',
                    status: 'expired',
                    validUntil: '2025-01-01'
                },
                {
                    id: 3,
                    amount: 10,
                    condition: 50,
                    type: '满减券',
                    restriction: '限家政服务类订单使用',
                    status: 'usable',
                    validUntil: '2025-12-31'
                },
                {
                    id: 4,
                    amount: 30,
                    condition: 150,
                    type: '满减券',
                    restriction: '限家政服务类订单使用',
                    status: 'available',
                    validUntil: '2025-12-31'
                }
            ],
            selectedCoupon: null,
            tagList: this.$store.getters.tagList,
            virtualAssets: null
        }
    },
    components: {
        fixedFooter,
        OrderPayPopup,
        shopSpecifications,
        CouponList, // 注册优惠券组件\
        addressVue,
        VirtualAssetPopup
    },
    computed: {
        ...mapGetters(['currentAddress', 'defaultAddress']),
        selectedMaster() {
            return (this.$store && this.$store.getters && this.$store.getters.selectedMaster) || null
        },
        selectedSpec() {
            console.log(this.$store.getters.selectedSpec)
            return (this.$store && this.$store.getters && this.$store.getters.selectedSpec) || null
        },
        // 实际用于下单的地址：优先当前选择，其次默认地址
        effectiveAddress() {
            return this.currentAddress || this.defaultAddress || null
        },
        reservationState() {
            return (this.$store && this.$store.getters && this.$store.getters.reservation) || { date: '', time: '' }
        },
        reservationDisplay() {
            const d = this.reservationState
            if (d && (d.date || d.time)) {
                return `${d.date} ${d.time}`.trim()
            }
            return '请选择'
        },
        pointsDiscountAmount() {
            return 0;
            // 使用选中规格的价格计算
            const price = this.selectedSpec && this.selectedSpec.price ? Number(this.selectedSpec.price) : this.basePrice
            const total = price * (this.selectedSpec ? this.selectedSpec.quantity : this.quantity)
            return Math.min(total * 0.1, 99999)
        },
        subtotal() {
            // 使用选中规格的价格计算
            const price = this.selectedSpec && this.selectedSpec.price ? Number(this.selectedSpec.price) : this.basePrice
            const total = price * (this.selectedSpec ? this.selectedSpec.quantity : this.quantity)
            let minus = 0
            if (this.selectedAsset === 'points' && this.usePoints) {
                minus += this.pointsDiscountAmount
            }
            if (this.selectedAsset === 'warmCore' && this.useWarmCore) {
                minus += this.warmCoreDiscount
            }
            // 添加优惠券折扣
            if (this.selectedCoupon && this.selectedCoupon.status === 'usable') {
                minus += this.selectedCoupon.amount
            }
            return (total - minus).toFixed(2)
        },
        virtualAssetText() {
            if (this.nowSelectedAsset === 'points') {
                return `积分: ${this.pointsValue}, 可打0折`;
            } else if (this.nowSelectedAsset === 'warmCore') {
                return `暖芯值: ${this.warmCoreValue}, 可抵扣¥${this.warmCoreDiscount}`;
            }
            return '请选择';
        }
    },
    onBackPress(options){
        // 物理返回/顶部返回：清空当前订单相关的临时数据
        this.clearOrderData()
        // 允许默认返回行为
        return false
    },
    onLoad(option) {
        this.is_bidding = option.isBidding == 'true' ? true : false || false
        this.blackUrl = `/views/order/confirm-order?isBidding=${this.is_bidding}`
    },
    onShow() {
        // 同步已选择的数量与规格
        const m = this.selectedMaster
        if (m) {
            this.quantity = m.quantity || 1
            this.selectedPackage = (m.package && m.package.id) || 1
        }
        
        // 不再自动选择默认地址，保持为空由用户主动选择

    },
    methods: {
        ...mapMutations(['SET_SELECTED_ADDRESS']),
        // 清空订单相关数据
        clearOrderData() {
            // 只清除师傅与预约时间
            if (this.$store && this.$store.commit) {
                this.$store.commit('SET_SELECTED_MASTER', null)
                this.$store.commit('SET_RESERVATION', { date: '', time: '' })
            }
        },
        handleClickReservation(type) {
            if (this.is_bidding) {
                uni.redirectTo({ url: '/views/housekeep/reservation?isBidding=true' })
                return
            }
            // 若已有选择，点击师傅行跳转到师傅详情，并允许取消
            if (type === 'master' && this.selectedMaster) {
                uni.redirectTo({ url: '/views/housekeep/master-details?id=' + this.selectedMaster.id })
                return
            }
            // 否则进入预约页选择
            this.goUrl('/views/housekeep/reservation')
        },
        decreaseQuantity() {
            if (this.selectedSpec && this.selectedSpec.quantity > 1) {
                // 更新全局store中的数量
                if (this.$store && this.$store.commit) {
                    this.$store.commit('SET_SELECTED_SPEC', {
                        ...this.selectedSpec,
                        quantity: this.selectedSpec.quantity - 1
                    })
                }
            } else if (this.quantity > 1) {
                this.quantity--
            }
        },
        increaseQuantity() {
            if (this.selectedSpec) {
                // 更新全局store中的数量
                if (this.$store && this.$store.commit) {
                    this.$store.commit('SET_SELECTED_SPEC', {
                        ...this.selectedSpec,
                        quantity: this.selectedSpec.quantity + 1
                    })
                }
            } else {
                this.quantity++
            }
        },
        submitOrder() {
            
            console.log('提交订单', {
                address: this.effectiveAddress,
                quantity: this.quantity,
                remarks: this.remarks,
                subtotal: this.subtotal
            })
            // 这里添加提交订单的逻辑
            // 成功后弹出支付弹窗
            this.showVirtualAssetPopup = false
            this.showPayPopup = true
        },
        handlePayConfirm({ method, amount }) {
            // 构建完善的订单数据
            // 判断 expected_salary 是否需要传递
            let data = {
                service_id: this.selectedSpec.serviceDetail.id, // 服务id
                sku_id: this.selectedSpec.id, // 规格id
                quantity: this.selectedSpec && this.selectedSpec.quantity ? this.selectedSpec.quantity : this.quantity, // 数量
                order_type: this.is_bidding ? 2 : 1, // 价格类型：1一口价，2竞价
                service_time: this.reservationDisplay, // 预约服务开始时间
                service_time_end: '', // 预约服务结束时间（如有）
                address_id: this.effectiveAddress.id, // 地址id
                remark: this.remarks || '', // 备注
            }
            // 只有竞价时才加 expected_salary 字段
            if (this.is_bidding) {
                data.expected_salary = this.salary
            } else {
                data.points_used = (this.nowSelectedAsset === 'points' && this.usePoints) ? (this.virtualAssets ? this.virtualAssets.points : 0) : 0; // 积分
                data.warm_core_used = (this.nowSelectedAsset === 'warmCore' && this.useWarmCore) ? (this.virtualAssets ? this.virtualAssets.warm_core : 0) : 0; // 暖芯值
                data.technical_id = this.selectedMaster.id; // 师傅id
            }

            this.showPayPopup = false
            //创建订单
            postHousekeepOrderCreate(data).then((res) => {
                if(res.errno === 0) {
                    // 在此发起实际支付请求
                    uni.showToast({
                        title: `${method === 'wechat' ? '微信' : method === 'alipay' ? '支付宝' : '余额'}支付：¥${amount}`,
                        icon: 'none'
                    })
                }
            })
        },
        openVirtualAssetPopup() {
            this.showVirtualAssetPopup = true;
        },
        onAssetsReady(assets) {
            this.virtualAssets = assets
            this.pointsValue = assets && assets.points ? assets.points : 0
            this.warmCoreValue = assets && assets.warm_core ? assets.warm_core : 0
            this.warmCoreDiscount = this.warmCoreValue
        },
        onAssetConfirmed(selected, assets) {
            this.onAssetsReady(assets || {})
            this.selectedAsset = selected
            this.nowSelectedAsset = selected
            this.usePoints = selected === 'points'
            this.useWarmCore = selected === 'warmCore'
        },
        changePointsSwitch(val) {
            this.usePoints = val
        },
        changeWarmCoreSwitch(val) {
            this.useWarmCore = val
        },
        goUrl(url) {
            uni.redirectTo({
                url: url
            });
        },
        closePackagePopup() {
            this.showPackagePopup = false;
        },
        // 确认选择规格和数量
        onConfirmSelection(result) {
            console.log('确认选择:', result);
            // 更新页面上的选中状态
            this.selectedPackage = result.specId;
            this.quantity = result.quantity;

            if (this.$store && this.$store.commit) {
                this.$store.commit('SET_SELECTED_SPEC', {
                    id: result.specId,
                    name: result.specName,
                    price: result.productInfo.price,
                    unit: result.productInfo.unit,
                    quantity: result.quantity,
                    serviceDetail: this.selectedSpec.serviceDetail
                })
            }
        },
        // 优惠券相关方法
        openCouponPopup() {
            this.showCouponPopup = true;
        },
        closeCouponPopup() {
            this.showCouponPopup = false;
        },
        handleClaimCoupon(coupon) {
             uni.showToast({
                 title: `已领取优惠券: ${coupon.type}`,
                 icon: 'none'
             });
             this.couponList = this.couponList.map(c => {
                 if (c.id === coupon.id) {
                    console.log(this.$refs.coupon)
                    return { ...c, status: 'usable' };
                 }
                 return c;
             });
         },
        handleUseCoupon(coupon) {
            // 如果已经有其他优惠券在使用中，先取消它们
            if (this.selectedCoupon && this.selectedCoupon.id !== coupon.id) {
                // 将之前使用的优惠券状态改回usable
                this.couponList = this.couponList.map(c => {
                    if (c.id === this.selectedCoupon.id) {
                        return { ...c, status: 'usable' };
                    }
                    return c;
                });
            }
            
            // 设置当前优惠券为使用中状态
            this.selectedCoupon = coupon;
            this.couponList = this.couponList.map(c => {
                if (c.id === coupon.id) {
                    return { ...c, status: 'canceluse' };
                }
                return c;
            });
            
            uni.showToast({
                title: `已使用优惠券: ${coupon.type}`,
                icon: 'success'
            });
            
            this.closeCouponPopup();
        },
        handleCancelUseCoupon(coupon) {
            // 取消使用优惠券
            this.selectedCoupon = null;
            this.couponList = this.couponList.map(c => {
                if (c.id === coupon.id) {
                    return { ...c, status: 'usable' };
                }
                return c;
            });
            
            uni.showToast({
                title: `已取消使用优惠券: ${coupon.type}`,
                icon: 'none'
            });
        },

        clearSelectedCoupon() {
            this.selectedCoupon = null;
            uni.showToast({
                title: '已取消优惠券',
                icon: 'none'
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.confirm-order {
    background: #F6F6F6;
    min-height: 100vh;
    padding: 28rpx 32rpx 200rpx;
}


.cen-box {
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.06);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
}

.service-guarantees {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;
    border-radius: 20rpx 20rpx 0 0;
    background: #FF4141;

    
    .guarantee-item {
        display: flex;
        align-items: center;

        span {
            color: #fff;
        }
        
        text {
            font-size: 28rpx;
            color: #FFFFFF;
            margin-left: 5rpx;
        }
    }
}

.service-card {
    padding: 0 32rpx;

    .service-card-box {
        padding: 32rpx 0;
        background: #FFFFFF;
        display: flex;
        gap: 24rpx;
        border-bottom: 1rpx solid #DDDDDD;
    }

    .service-image {
        flex-shrink: 0;
    }

    .service-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .service-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
    }

    .service-spec {
        font-size: 24rpx;
        margin-top: -15rpx;
        color: #999999;
    }

    .service-price-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .service-price {
        font-size: 32rpx;
        font-weight: 600;
        color: #FF6B35;

        .service-price-txt {
            font-size: 24rpx;
        }

        .service-price-num {
            font-size: 32rpx;
        }
    }

    .quantity-selector {
        display: flex;
        align-items: center;
        gap: 16rpx;
        margin-top: 8rpx;
    }

    .quantity-btn {
        width: 28rpx;
        height: 28rpx;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        border: 1rpx solid #999999;
        font-size: 28rpx;
        line-height: 24rpx;
        text-align: center;
        color: #333;
        background: #FFFFFF;
    }

    .quantity-input {
        width: 20rpx;
        height: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: #333;
        background: #FFFFFF;
    }
}

.selection-card {
    background: #FFFFFF;
    padding: 0 32rpx;

    .selection-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 28rpx 0;
        border-bottom: 1rpx solid #DDDDDD;
    }

    .selection-label {
        font-size: 28rpx;
        color: #333;
    }

    .selection-value {
        display: flex;
        align-items: center;
        gap: 8rpx;
        font-size: 28rpx;
        color: #666;
    }
}

.price-card {
    background: #FFFFFF;
    padding:0 32rpx;

    .price-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 28rpx 0;
        border-bottom: 1rpx solid #DDDDDD;
        
        &.selected-coupon {
            background: #F8F9FA;
            margin: 0 -32rpx;
            padding: 28rpx 32rpx;
            border-bottom: 1rpx solid #EEEEEE;
        }
    }


    .price-label {
        font-size: 28rpx;
        color: #333;
    }

    .price-label-txt {
        font-size: 24rpx;
        color: #999;
    }

    .dk-con {
        display: flex;
        flex-direction: column;
        gap: 4rpx;
    }

    .price-value {
        display: flex;
        align-items: center;
        gap: 8rpx;
        font-size: 28rpx;

        &-input {
            padding: 0 !important;
            font-size: 28rpx !important;
            height: 28rpx !important;
        }
    }

    .discount {
        font-size: 28rpx;
        color: #999;
    }

    .virtual-asset {
        font-size: 28rpx;
        color: #999;
    }

    .price-summary {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 28rpx 0;
    }

    .total-count {
        font-size: 28rpx;
        color: #333;
    }

    .subtotal {
        display: flex;
        align-items: center;
        gap: 8rpx;
    }

    .subtotal-label {
        font-size: 28rpx;
        color: #333;
        margin: 0 0 0 28rpx;
    }

    .subtotal-price {
        font-size: 32rpx;
        font-weight: 600;
        color: #FF6B35;
    }
}

.booking-card {
    background: #FFFFFF;
    padding:0 32rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;

    .booking-item {
        padding: 28rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #DDDDDD;

        &:last-child {
            margin-bottom: 0;
            border: none;
        }
    }

    .booking-label {
        font-size: 28rpx;
        color: #333;
    }

    .booking-value {
        display: flex;
        align-items: center;
        gap: 8rpx;
        font-size: 28rpx;
        color: #999;
    }
}

.remarks-card {
    background: #FFFFFF;
    padding: 32rpx;
    margin-bottom: 20rpx;
    border-radius: 20rpx;

    .remarks-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
    }

    .remarks-title {
        font-size: 28rpx;
        color: #333;
    }

    .char-count {
        position: absolute;
        bottom: 16rpx;
        right: 16rpx;
        pointer-events: none;
        font-size: 24rpx;
        color: #999;
    }

    .remarks-input-box {
        position: relative;
        width: 100%;
        height: 140rpx;
    }

    .remarks-input {
        width: 100%;
        height: 140rpx;
        background: #FAFAFA;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 16rpx;
        font-size: 26rpx;
        color: #333;
        box-sizing: border-box;
    }
}

.virtual-asset-popup {
    padding: 32rpx;
    display: flex;
    flex-direction: column;
    height: 100%;

    .popup-header {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 28rpx;
    }

    .popup-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
    }

    .asset-options {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 28rpx;
    }

    .asset-option {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 28rpx 0;
        overflow: hidden;
        border-bottom: 1rpx solid #DDDDDD;

        &:last-child {
            border-bottom: none;
        }

        &.active {
            background-color: #F0F0F0;
        }

        &.no-click {
            pointer-events: none;
            opacity: 0.5;
        }
    }

    .asset-left {
        display: flex;
        gap: 10rpx;
    }

    .asset-icon {
        width: 32rpx;
        height: 100%;

        .asset-icon-img {
            margin-top: 5rpx;
        }

        span {
            font-size: 32rpx;
            color: #df9824;
        }
    }

    .asset-info {
        display: flex;
        flex-direction: column;
    }

    .asset-name {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
    }

    .asset-desc {
        font-size: 24rpx;
        color: #999;
        margin-top: 4rpx;
    }

    .asset-right {
        display: flex;
        align-items: center;
        gap: 16rpx;
    }

    .radio-btn {
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        border: 1rpx solid #999;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #FFFFFF;

        &.selected {
            border-color: #0785CF;
            background-color: #0785CF;
        }
    }

    .popup-footer {
        display: flex;
        justify-content: center;
        padding-top: 28rpx;
    }

    .confirm-btn {
        width: 100%;
        height: 80rpx;
        background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);   
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        font-weight: 600;
        color: #FFFFFF;
    }
}

.coupon-popup {
    padding: 32rpx 0;
    display: flex;
    flex-direction: column;
    height: 100%;

    .coupon-list-container {
        padding: 60rpx 0 28rpx;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}


.submit-btn {
    width: 100%;
    height: 80rpx;
    background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);   
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #FFFFFF;
}
</style>
